import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { DynamicFormComponent } from 'src/app/component/DynamicForm/dynamic-form/dynamic-form.component';
import { Person } from '../../users.component'

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
  @ViewChild('submit')
  submit!: DynamicFormComponent;
  title: string = '新增用户'
  validateForm!: FormGroup
  isVisible = false
  isOkLoading = false
  name: string = ''
  listOfOption = [
    { label: 'Jack', value: 'jack' },
    { label: 'Lucy', value: 'lucy' },
    { label: 'disabled', value: 'disabled', disabled: true }
  ];
  schemas = {
    showActionButtonGroup: false,
    buttonAlign: 'end',
    baseColProps: {
      label: {
        nzSm: "6",
        nzXs: "24",
      },
      control: {
        nzSm: "14",
        nzXs: "24",
      }
    },
    wrapperCol: {
      nzSpan: "24",
    },
    fieldList: [
      {
        field: 'name',
        component: 'Input',
        label: '用户名',
        placeholder: '请输入',
        required: true,
        colProps: {
          label: {
            nzSm: "6",
            nzXs: "24",
          },
          control: {
            nzSm: "14",
            nzXs: "24",
          }
        },
        onChange: (e: any) => {
          let { validateForm } = this.submit
          validateForm.setValue({name: e.target.value, role: 'lucy', auth: e.target.value, sex: 'lucy', isUse: true, description: ''})
        },
        rules: (e: any) => {
          let value = e.value
          if(!value) {
            return {msg: '请输入名称', field: 'name'}
          } else {
            const valid = value.match(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{6,20}$/)
            return valid ? {} : { msg: "只能输入数字和字母", field: 'name' }
          }
        }
      },
      {
        field: 'role',
        component: 'Select',
        label: '角色',
        placeholder: '请选择',
        required: true,
        valueField: 'value',
        labelField: 'name',
        disabled: false,
        options: [
          { name: 'Lucy', value: 'lucy'},
          { name: 'Jack', value: 'jack' }
        ],
        onChange: (e: any) => {
          console.log(e);
          
        },
        rules: (e: any) => {
          let value = e.value
          if(!value) {
            return {msg: '请选择角色', field: 'role' }
          } else {
            return null
          }
        }
      },
      {
        field: 'auth',
        component: 'InputNumber',
        label: '权限值',
        placeholder: '请输入',
        required: true,
        onChange: (e: any) => {
          console.log(e);
          
        },
        rules: (e: any) => {
          let value = e.value
          if(!value) {
            return {msg: '请输入权限值', field: 'auth' }
          } else {
            return null
          }
        }
      },
      {
        field: 'sex',
        component: 'RadioGroup',
        label: '性别',
        valueField: 'value',
        labelField: 'name',
        required: true,
        options: [
          { name: 'Lucy', value: 'lucy'},
          { name: 'Jack', value: 'jack' }
        ],
        onChange: (e: any) => {
          console.log(e);
          
        },
        rules: (e: any) => {
          let value = e.value
          if(!value) {
            return {msg: '请选择性别', field: 'sex' }
          } else {
            return null
          }
        }
      },
      {
        field: 'isUse',
        component: 'Switch',
        label: '是否使用',
        onChange: (e: any) => {
          console.log(e);
          
        }
      },
      // {
      //   field: 'datetime',
      //   component: 'DatePicker',
      //   label: '时间',
      //   placeholder: '请选择',
      //   required: true,
      // },
      {
        field: 'description',
        component: 'InputTextArea',
        label: '描述',
        placeholder: '请输入',
        required: false,
        maxRows: 4,
        minRows: 4,
        onChange: (e: any) => {
          console.log(e);
        },
        rules: (e: any) => {
          let value = e.value
          if(!value) {
            return {msg: '请输入描述', field: 'description' }
          } else {
            return null
          }
        }
      },
    ],
    submitFunc: this.handleSubmit
  }
  
  handleCancel() {
    this.isVisible = false
  }
  handleOpen(val?: Person) {
    this.isVisible = true
    // let { validateForm } = this.submit
    ;

    if(val) {
      this.title = '编辑用户'
      setTimeout(() => {
        let { validateForm } = this.submit
        validateForm.setValue({name: val.name, role: 'lucy', auth: val.age, sex: 'lucy', isUse: true, description: ''})
      }, 200);
      // validateForm.setValue({name: val.name})
      // this.name = val.name
    } else {
      this.title = '新增用户'
    }
    
  }
  handleSubmit() {
    // this.submit.submit()
    let { name } = this.submit.submit()
    console.log(this.submit, 'ddddd', name);
  }

  constructor() { }

  ngOnInit(): void {
 
  }

}
